<template>
  <div ref="stencil" id="stencil"></div>
</template>

<script>
import { Addon } from '@antv/x6'
import { mapState, mapActions } from 'vuex';

import { dagData } from '../cells'
console.log(JSON.parse(dagData))
export default {
  name: "stencil",
  data() {
    return {
      dagData
    };
  },
  mounted() {
    this.init()
  },
  computed: mapState({
    modelShapes: state => state.dag.modelShapes,
    graph: state => state.dag.graph
  }),
  methods: {
    ...mapActions(['assignGraph']),
    init() {
      this.stencil = new Addon.Stencil({
        title: ' ',
        target: this.graph,
        stencilGraphWidth: 250,
        stencilGraphHeight: 480,
        collapsable: false,
        groups: [
          {
            title: ' ',
            name: 'group2',
            graphHeight: 540,
            collapsable: false,
            layoutOptions: {
              rowHeight: 70,
            },
          },
        ],
        layoutOptions: {
          columns: 1,
          columnWidth: 112,
          rowHeight: 55,
        },
      })
      let html = item => {
        return `<div class="self-defined">
              <img src="${item.image}" class="self-defined-icon" />
              <p class="self-defined-word">${ item.label }</p>
          </div>`
      }
      this.$refs.stencil.appendChild(this.stencil.container)
      this.imageNodes = this.modelShapes.map((item) =>
        this.graph.createNode({
          shape: 'my-html',
          // label: item.label,
          data: item.paramList,
          paramList: item.paramList,
          html: html(item)
        }),
      )
      this.stencil.load(this.imageNodes, 'group2')
    
      if (this.dagData) {
        this.graph.fromJSON(JSON.parse(this.dagData))
      }
    }
  }
};
</script>

<style lang="less" scoped>

</style>
